
<template>
  <div class="wrap">
    <div class="title">
      <img src="../../images/main/par.png" alt>
      <span class="back" @click="backParMan()">员工管理</span>
      <img class="right" src="../../images/main/right.png" alt>
      <span>权限配置</span>
    </div>
    <div class="clear"></div>
    <div class="body">
      <div class="list">
        <span class="htmls">页面权限</span>
        <span class="misslz">操作权限</span>
      </div>
      <ul class="wrapper" v-for="(item, index) in arrs" :key="index">
        <li class="widthed">
          <span>
            <input class="checkboxeds" type="checkbox" v-model="item.permission.checked" @change="setSubPermission(index)">
            <span class="checkName">{{item.permission.name}}</span>
          </span>
        </li>
        <li class="whites" v-for="(itemed, indexs) in item.ziList" :key="indexs">
          <span>
            <input class="checkboxeds" type="checkbox" v-model="itemed.checked" @click="checkPermission(item.permission.id,$event)">
            <span class="checkName">{{itemed.name}}</span>
          </span>
        </li>
      </ul>
      <div class="submit" @click="submit()">提交</div>
    </div>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      userList: [],
      sysList: [],
      staffInfo: {},
      arrs: [],
      // 权限的id的集合
      idList: []
    };
  },
  methods: {
    setSubPermission(index){
      let _sysList = this.arrs;

      if(_sysList[index] && _sysList[index].ziList && !_sysList[index].permission.checked){
        let _ziList = _sysList[index].ziList.slice(0)
        for (let i = 0; i < _ziList.length; i++) {
          _ziList[i].checked = false;
        }
        this.arrs[index].ziList = _ziList
      }
    },
    checkPermission(id,event){
      let _sysList = this.arrs;
      for (let index = 0; index < _sysList.length; index++) {
        const element = _sysList[index];
        console.log(element.permission.id)
        if(id === element.permission.id && !element.permission.checked){
          this.$message({
            message: '请先设置页码权限！',
            type: 'warning'
          })
          if (event) {
            event.target.checked = false;
          }
          return false;
        }
      }
    },
    // 用户得权限
    submit: function() {
      let _sysList = this.arrs;
      let isChooseFlag = false;
      var that = this
      for (let i = 0; i < _sysList.length; i++) {
        if(_sysList[i].permission.checked){
          isChooseFlag = true;
          break;
        }
      }
      if(!isChooseFlag){
        this.$message({
          message: '请先配置权限',
          type: 'warning'
        });
        return;
      }
      this.idList = [];
      this.arrs.map((val, index) => {
        if (val.permission.checked === true) {
          this.idList.push(val.permission.id);
        }
        val.ziList.map((value, indexed) => {
          if (value.checked === true) {
            this.idList.push(value.id);
          }
        });
      });
      let obj = {};
      obj.empId = Global.mansId;
      obj.id = this.idList.toString();
      axios({
        method: "post",
        url: `${this.$store.state.url}/sysPermission/updateByEmployee`,
        data: qs.stringify(obj)
      }).then(res => {
        if (res.data.code == 0) {
          this.$store.state.fn.success( '配置成功' );
        this.$router.push({
          path: "/main/staffMan"
        });
        let logData = {
                loginTime:this.$cookie.get("loginTime"),
                account:this.$cookie.get("userAccount"),
                content:'设置员工权限',
              operationTime:this.setDate(new Date()) + ' ' +this.setTime(new Date())
              }
              axios({
          method: "post",
          url: `${that.$store.state.url}/log/addLog`,
          data: qs.stringify(logData)
        }).then( (res) => {
          console.log(res,'222')
        })
        }
        
      });
    },
    userId: function() {
      axios({
        method: "post",
        url: `${this.$store.state.url}/sysPermission/selectByEmployeeId`,
        data: qs.stringify({ empId: Global.mansId })
      }).then(res => {
        console.log(res)
        this.userList = res.data.data; // 用户
        if (this.userList.length !== 0) {
          this.userList.map(userval => {
            this.sysList.map(sysval => {
              console.log(sysval)

              // 系统默认
              // if (userval.pid === sysval.permission.id) {
              //   sysval.permission.checked = true;
              // }
              if (userval.id === sysval.permission.id) {
                sysval.permission.checked = true;
              }
              sysval.ziList.map((valued, indexd) => {
                if (userval.id === valued.id) {
                  valued.checked = true;
                }
              });
            });
          });
        } else {
          this.sysList.map(val => {
            val.permission.checked = false;
            val.ziList.map(valued => {
              valued.checked = false;
            });
          });
        }
        this.arrs = this.sysList;
        console.log(this.arrs, "wrwere");
      });
    },
    backParMan: function() {
      this.$router.push({
        path: "/main/staffMan",
        name: "staffMan"
      });
    },
    /**
     * 获取权限列表
     */
    getSysMan: function() {
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/sysPermission/selectAll`
      }).then(res => {
        this.userId();
        if (res.data.code == 0) {
          that.sysList = res.data.data;
        } else {
          this.$alert(res.data.msg);
        }
      });
    },
    /**
     * 保存权限
     */
    saveSysyMan: function() {
      axios({
        method: "post",
        url: `${that.$store.state.url}/sysPermission/updateByEmployee`,
        data: qs.stringify(staffInfo)
      }).then(res => {
        if (res.data.code == 0) {
          that.sysList = res.data.data;
          this.$message({
          message: '配置成功',
          type: 'success'
        });
        } else {
          that.$alert(res.data.msg);
        }
      });
    },
     /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getSysMan();
  }
};
</script>
<style scoped>
.wrap {
  /* padding: 68px 136px;
  width: 100%; */
  width: 90%;
  margin: 40px auto;
}
.nowParman {
  margin-top: 37px;
  margin-left: 48px;
}
.nowParman span {
  font-size: 18px;
  font-weight: bold;
}
.nows {
  color: #d81e06;
}
.title {
  height: 33px;
  line-height: 33px;
  font-size: 24px;
  font-family: PingFangSC-Medium;
  font-weight: bold;
}
.title span {
  float: left;
}
.title img {
  width: 28px;
  height: 26px;
  float: left;
  padding-top: 5px;
  margin-right: 10px;
}
.title .right {
  width: 11px;
  height: 18px;
  padding-top: 9px;
  margin-left: 5px;
  margin-right: 6px;
}
.body {
  background: #ffffff;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
  /* width: 1492px; */
  /* height: 569px; */
  margin-top: 40px;
  margin-left: 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding:20px;
}
.list {
  background: #f6f6f6;
  /* width: 1492px; */
  line-height: 60px;
  height: 60px;
}
.list span {
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #000000;
  letter-spacing: 0.03px;
  font-weight: bold;
}
.htmls {
  display: inline-block;
  /* width: 161px; */
  width: 16.66666666666667%;
  text-align: center;
}
.misslz {
  width: 82%;
  display: inline-block;
  /* margin-left: 68px; */
  text-align: center;
  /*width: 83%;*/
}
.checkboxeds {
  width: 17px;
  height: 17px;
  background-color: #fff;
}
.checkName {
  margin-left: 8px;
}
.wrapper {
  /* width: 1492px; */
  height: 60px;
}
.checkName {
  margin-left: -6px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #4a4a4a;
  letter-spacing: 0.75px;
  text-align: left;
  font-weight: bold;
}
.widthed {
  background: #f6f6f6;
  /* width: 161px; */
  width: 16.66666666666667%;
  height: 60px;
  float: left;
  line-height: 60px;
  text-align: center;
}
.wrapper {
  border-bottom: 1px solid #e0e0e0;
}
.wrapper .whites {
  /* width: 212px; */
  width: 16.66666666666667%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  float: left;
}
.submit {
  background: #085dab;
  width: 255px;
  height: 55px;
  font-family: PingFangSC-Medium;
  font-size: 18px;
  color: #ffffff;
  line-height: 55px;
  text-align: center;
  /* margin-top: 350px; */
  /* margin-left: 617px; */
  cursor: pointer;
  margin: 60px auto;
}
</style>
